<#assign idColumn=table.idColumn>
<#assign idTypeName=idColumn.javaType.simpleName>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <%@ include file="/WEB-INF/views/common/include/commons-head.jsp" %>
    <%@ include file="/WEB-INF/views/common/include/commons-before-css.jsp" %>
    <%@ include file="/WEB-INF/views/common/include/commons-after-css.jsp" %>
</head>
<body class="no-skin">

<div class="main-wrapper ace-save-state" id="main-wrapper">
    <script type="text/javascript">
        try {
            ace.settings.loadState('main-wrapper')
        } catch (e) {
        }
    </script>
    <div class="main-content">
        <div class="main-content-inner">
            <div class="page-content">
                <%-- 搜索条件 --%>
                <div class="row js-searchBar-wrapper">
                    <div class="col-sm-10">
                        <form role="form">
                        <#list table.columnsWithoutPrimaryKey as column>
                            <#if 'java.util.Date'==column.javaType.name>
                            <input type="hidden" class="js-search-condition" property="${column.property}" for="${column.property}Start,${column.property}End" value="between '?0' and '?1'">
                            <#else>
                            <input type="hidden" class="js-search-condition" property="${column.property}" for="${column.property}" value="like '%?0%'">
                            </#if>
                        </#list>

                        <div class="row">
                        <#list table.columnsWithoutPrimaryKey  as column>
                            <#assign i=column?index/>
                            <#if (i>0 && i % 3 == 0)>
                         </div>
                         <div class="row js-more-conditions" style="display: none;">
                            </#if>
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <div class='input-group'>
                                        <span class="input-group-addon">${column.label}</span>
                                        <#if 'java.util.Date'==column.javaType.name>
                                        <input type="text" class="form-control erp-datetimepicker" name="${column.property}Start"/>
                                        <span class="input-group-addon"><i class="fa fa-exchange"></i></span>
                                        <input type="text" class="form-control erp-datetimepicker" name="${column.property}End"/>
                                        <#else>
                                        <input type='text' class="form-control" name="${column.property}"/>
                                        </#if>
                                    </div>
                                </div>
                            </div>
                        </#list>
                        </div>
                        </form>
                    </div>
                    <div class="col-sm-2">
                        <button class="btn btn-sm btn-primary js-button-search">搜索</button>
                        <button class="btn btn-sm btn-default js-button-reset">重置</button>
                        <button class="btn btn-sm btn-success js-button-more">
                            <span class="glyphicon glyphicon-chevron-up"></span>
                            <span class="glyphicon glyphicon-chevron-down" style="display: none"></span>
                        </button>
                    </div>
                </div>

                <%-- 数据列表 --%>
                <div class="row js-dataTable-wrapper">
                    <div class="col-md-12">
                        <%-- create and delete --%>
                        <div style="margin: 1px;">
                            <button class="btn btn-xs btn-success js-button-create">
                                <span class="glyphicon glyphicon-plus"></span>
                                新增
                            </button>
                            <button class="btn btn-xs btn-danger js-button-delete">
                                <span class="glyphicon glyphicon-trash"></span>
                                删除
                            </button>
                        </div>
                        <%-- check, action(view and update) --%>
                        <div style="display: none">
                            <div class="js-check-column">
                                <div class="center">
                                    <label class="pos-rel">
                                        <input type="checkbox" class="ace"/> <span class="lbl"></span>
                                    </label>
                                </div>
                            </div>
                            <div class="js-action-column">
                                <div class="js-no-click">
                                    <button class="btn btn-xs btn-primary js-button-view">
                                        <i class="ace-icon fa fa-search bigger-125"></i>
                                    </button>
                                    <button class="btn btn-xs btn-warning js-button-update" style="margin-left: 5px">
                                        <i class="ace-icon fa fa-pencil bigger-125"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div>
                            <table class="js-table table table-striped table-bordered table-hover">
                                <thead>
                                <tr>
                                    <th class="center">
                                        <label class="pos-rel">
                                            <input type="checkbox" class="ace"/>
                                            <span class="lbl"></span>
                                        </label>
                                    </th>
                                <#list table.columnsWithoutPrimaryKey as column>
                                    <th>${column.label}</th>
                                </#list>
                                    <th>操作</th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>

                <%-- 弹出框（新增） --%>
                <div role="dialog" class="modal js-dialog-create" tabindex="-1">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <%-- header --%>
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                <h5 class="blue bigger">新增</h5>
                            </div>
                            <%-- body --%>
                            <div class="modal-body">
                                <form class="js-form-add" role="form" action="${'$\{'}ctx}/${table.viewUrl}"
                                      method="post" enctype="application/json;charset=utf-8">
                                <#list table.columnsWithoutPrimaryKey as column>
                                    <#assign isDate=('java.util.Date'==column.javaType.name)/>
                                    <#if !(isDate && (column.property=='createdDate' || column.property=='lastModifiedDate'))>
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <span class="input-group-addon">${column.label}</span>
                                                    <input type="text" class="form-control<#if isDate> erp-datetimepicker</#if>" name="${column.property}" required>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    </#if>
                                </#list>
                                </form>
                            </div>
                            <%-- footer --%>
                            <div class="modal-footer">
                                <button class="btn btn-sm" data-dismiss="modal">
                                    <i class="ace-icon fa fa-times"></i>
                                    取消
                                </button>

                                <button class="btn btn-sm btn-primary js-button-save">
                                    <i class="ace-icon fa fa-check"></i>
                                    保存
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <%-- 弹出框（修改） --%>
                <div role="dialog" class="modal js-dialog-update" tabindex="-1">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <%-- header --%>
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                <h5 class="blue bigger">修改</h5>
                            </div>
                            <%-- body --%>
                            <div class="modal-body">
                                <form class="js-form-update" role="form" action="${'$\{'}ctx}/${table.viewUrl}"
                                      method="put" enctype="application/json;charset=utf-8">
                                    <input type="hidden" name="${idColumn.property}">
                                <#list table.columnsWithoutPrimaryKey as column>
                                    <#assign isDate=('java.util.Date'==column.javaType.name)/>
                                    <#if !(isDate && (column.property=='createdDate' || column.property=='lastModifiedDate'))>
                                        <div class="row">
                                            <div class="col-sm-12">
                                                <div class="form-group">
                                                    <div class="input-group">
                                                        <span class="input-group-addon">${column.label}</span>
                                                        <input type="text" class="form-control<#if isDate> erp-datetimepicker</#if>" name="${column.property}" required>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </#if>
                                </#list>
                                </form>
                            </div>
                            <%-- footer --%>
                            <div class="modal-footer">
                                <button class="btn btn-sm" data-dismiss="modal">
                                    <i class="ace-icon fa fa-times"></i>
                                    取消
                                </button>

                                <button class="btn btn-sm btn-primary js-button-save">
                                    <i class="ace-icon fa fa-check"></i>
                                    保存
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <%-- 弹出框（查看） --%>
                <div role="dialog" class="modal js-dialog-view" tabindex="-1">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <%-- header --%>
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                <h5 class="blue bigger">详情</h5>
                            </div>
                            <%-- body --%>
                            <div class="modal-body">
                                <form class="js-form-view" role="form">
                                <#list table.columnsWithoutPrimaryKey as column>
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <span class="input-group-addon">${column.label}</span>
                                                    <input type="text" class="form-control" name="${column.name}" readonly>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </#list>
                                </form>
                            </div>

                            <%-- footer --%>
                            <div class="modal-footer">
                                <button class="btn btn-sm" data-dismiss="modal">
                                    <i class="ace-icon fa fa-times"></i>
                                    关闭
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<%@ include file="/WEB-INF/views/common/include/commons-js.jsp" %>
<%@ include file="/WEB-INF/views/common/include/commons-plugins-js.jsp" %>
<script src="${'$\{'}ctx}/resources/scripts/${table.viewUrl}.js"></script>
</body>
</html>
